<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="UTF-8">
<head>
    <th:block th:include="include :: header('巷道均衡分析')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>
</head>
<body>
<div class="container-div">
    <div class="row" id="floorPlan">
        <div class="col-sm-12 search-collapse" style="padding-top: 14px">
            <ul>
                <li>
                    <label>仓库：</label>
                    <select id="warehouseId" name="warehouseId" style="width: 150px" onchange="sc()">
                        <option value="01">CTU库</option>
                        <option value="02">四向车库</option>
                        <option value="03">标准库</option>
                        <option value="04">臂架库</option>
                    </select>
                    <label>开始时间 : </label>
                    <input type="text" class="time-input" placeholder="请单击选择开始时间：" name="startTime"
                           id="startTime" data-type="datetime"/>
                    <label>结束时间 : </label>
                    <input type="text" class="time-input" placeholder="请单击选择结束时间：" name="finishTime"
                           id="finishTime" data-type="datetime"/>
                    <a class="btn btn-primary btn-rounded btn-sm" onclick="sc()"><i
                            class="fa fa-search"></i>&nbsp;搜索</a>
                </li>
            </ul>


        </div>
        <div class="col-sm-12 select-table table-striped">
            <div id="main" style="width: 100%;height:600px;padding-top:100px "></div>
        </div>
    </div>
</div>
<script th:src="@{/js/echarts.min.js}"></script>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    function coverZero(i) {
        if (i < 10) {
            i = '0' + i;
        }
        return i;
    }

    var d = new Date();
    var y = d.getFullYear();
    var m = d.getMonth();
    var day = coverZero(d.getDate());
    var day2 = day;
    var h = coverZero(d.getHours());
    var f = coverZero(d.getMinutes());
    var s = coverZero(d.getSeconds());
    if (m < 10) {
        var days = new Date(y, m, 0);
        if (day2 > days) {
            day2 = days;
        }
        var nowDate = y + '-0' + (m + 1) + '-' + day + ' ' + h + ':' + f + ':' + s;
        var passDate = y + '-0' + m + '-' + day2 + ' ' + h + ':' + f + ':' + s;
    }

    if (m == 0) {
        y = y - 1;
        var days = new Date(y, 12, 0);
        if (day2 > days) {
            day2 = days;
        }
        passDate = y + '-' + 12 + '-' + day2 + ' ' + h + ':' + f + ':' + s;
        nowDate = (y + 1) + '-' + (m + 1) + '-' + day + ' ' + h + ':' + f + ':' + s;
    }

    $('#startTime').val(passDate);
    $('#finishTime').val(nowDate);


    layui.use('laydate', function () {
        var laydates = layui.laydate;
        laydates.render({
            elem: '#startTime'
            , type: 'datetime',
            /* ,range: '到' */
            format: 'yyyy-MM-dd HH:mm:ss'
        })
    })

    layui.use('laydate', function () {
        var laydates = layui.laydate;
        laydates.render({
            elem: '#finishTime'
            , type: 'datetime',
            /* ,range: '到' */
            format: 'yyyy-MM-dd HH:mm:ss'
        })
    })
    var startTime = $("#startTime").val();
    var finishTime = $("#finishTime").val();

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '巷道均衡分析'
        },
        tooltip: {
            trigger: 'axis'//坐标轴触发
        },
        legend: {
            data: ['入库数据', '出库数据']
        },
        calculable: true,
        xAxis: {
            data: []
        },
        yAxis: {
            type: 'value'
        },
        toolbox: {
            show: true,
            feature: {
                /*  dataZoom: {
                     yAxisIndex: 'none'
                 }, */ //区域缩放，区域缩放还原
                dataView: {
                    readOnly: false
                }, //数据视图
                magicType: {
                    type: ['line', 'bar']
                },  //切换为折线图，切换为柱状图
                restore: {},  //还原
                saveAsImage: {}   //保存为图片
            }
        },
        series: [
            {
                name: '入库数据',
                type: 'bar',
                data: [],
                itemStyle: {
                    normal: {
                        label: {
                            show: true, //开启显示
                            position: 'top', //在上方显示
                            textStyle: {} //数值样式
                        }
                    }
                }
            },
            {
                name: '出库数据',
                type: 'bar',
                data: [],
                itemStyle: {
                    normal: {
                        label: {
                            show: true, //开启显示
                            position: 'top', //在上方显示
                            textStyle: {} //数值样式
                        }
                    }
                }
            }
        ]
    };
    var inData = [];
    var outData = [];

    function sc() {
        var startTime = $("#startTime").val();
        var finishTime = $("#finishTime").val();
        var warehouseId = $("#warehouseId").val();
        if (warehouseId == "01") {
            var data = ["1巷道", "2巷道", "3巷道", "4巷道", "5巷道", "6巷道"];
        } else {
            var data = ["1巷道", "2巷道", "3巷道"];
        }
        $.ajax({
            "url": "/kpi/ra?startTime=" + startTime + "&finishTime=" + finishTime + "&warehouseId=" + warehouseId,
            "type": "POST",
            "dataType": "json",
            "data": $("#form_search").serialize(),
            "success": function (json) {
                inData = json.in;
                outData = json.out;
                myChart.hideLoading(); //隐藏加载动画
                myChart.setOption({ //加载数据图表
                    series: [{
                        data: inData
                    },
                        {
                            data: outData
                        }]
                });
                myChart.setOption({
                    xAxis: {
                        data: data
                    }
                })
            }
        });
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    $(document).ready(function () {
        sc();
    })
</script>
</body>
</html>